<template>
	<div class="fillcontain">
		<head-top></head-top>
		<div class="table_container">
			<!-- 条件查询 -->
			<el-row :gutter="20 " class="demo-autocomplete">
				<el-col :span="3">
					<el-select v-model="typename" placeholder="请选择操作类型">
						<el-option v-for="item in Customtypenameoptions" :key="item.configtypevalue" :label="item.configtypename" :value="item.configtypevalue">
						</el-option>
						<el-option value="" label="不限">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="8">
					<div class="block">
						<el-date-picker v-model="timevalue" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
						 start-placeholder="开始日期" end-placeholder="结束日期" align="right">
						</el-date-picker>
					</div>
				</el-col>
			</el-row>
			<br />
			<el-table :data="accountdetails" highlight-current-row style="width: 100%">
				<el-table-column property="id" type="index" width="100" label="序号">
				</el-table-column>
				<el-table-column property="detailtypename" label="财务类型" width="220">
				</el-table-column>
				<el-table-column label="账务资金" width="220">
					<template slot-scope="scope">{{ scope.row.money|moneyFilter}}</template>
				</el-table-column>
				<el-table-column label="账户余额">
					<template slot-scope="scope">{{ scope.row.accountmoney|moneyFilter}}</template>
				</el-table-column>
				<el-table-column property="memo" label="备注信息">
				</el-table-column>
				<el-table-column label="明细时间">
					<template slot-scope="scope">{{ scope.row.detaildatetime|moment}}</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 15,20]"
				 :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="count">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import headTop from '../components/headTop'
	import {
		selectAccountdetailPage,
		queryByConfigType
	} from '@/api/getData'
	export default {
		data() {
			return {
				accountdetails: [],
				//分页
				page: 0,
				size: 5,
				currentPage: 1,
				count: 0,
				//操作类型集合
				Customtypenameoptions: [],
				//操作类型对象
				typename: '',
				//日期快捷选项
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				timevalue: '',
				starttime: '',
				endtime: '',
			}
		},
		//动态加载
		watch: {
			typename: function() {
				this.selectWhere();
			},
			timevalue: function() {
				this.selectWhere();
			},
            $route(to,from){
                if(to.path=="/adminList"){
                  this.initData();
              }
            }
		},
		components: {
			headTop,
		},
		created() {
			this.initData();
		},
		computed: {
			...mapState(['adminInfo']),
		},
		filters: {
			moneyFilter: function(val) {
				return '￥' + val + '.00';
			}
		},
		methods: {
			//封装查询
			async selectWhere() {
				if (this.timevalue == '') {
					this.starttime = 0;
					this.endtime = new Date().getTime();
				} else {
					this.starttime = this.timevalue[0].getTime();
					this.endtime = this.timevalue[1].getTime()
				}
				const res = await selectAccountdetailPage({
					pageNum: this.currentPage,
					pageSize: this.size,
					detailtype: this.typename,
					starttime: this.starttime,
					endtime: this.endtime
				});
				console.log(res)
				this.count = res.total;
				this.accountdetails = res.rows;
			},
			async initData() {
				try {
					this.Customtypenameoptions = await queryByConfigType(1);
					this.selectWhere();
				} catch (err) {
					console.log('获取数据失败', err);
				}
			},
			//分页
			handleSizeChange(val) {
				this.size = val;
				this.initData()
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.page = (val - 1) * this.rows;
				this.initData()
			}
		},
	}

</script>

<style lang="less">
	@import '../style/mixin';

	.table_container {
		padding: 20px;
	}
</style>
